<template>
  <div class="back-white height-full pt14">
    <!-- <div class="tabs ml12">
      <Tabs v-model="tabActiveValue" class="custom-tabs" @on-click="handleTabClick">
        <TabPane v-for="(tab, i) of tabs" :key="i" :label="tab.label" :name="tab.value"></TabPane>
      </Tabs>
    </div> -->

    <div class="d-flex flex-ju-sb ml12 mt12">
      <div class="list-caption f16 mt8">{{ tableTitle }}</div>

      <div class="mr32">
        <Form
          class="custom-ivu-form d-inline-block"
          style="vertical-align: 5px"
          inline
          :label-width="60"
          label-position="left"
          @submit.native.prevent="handleFormSubmit"
        >
          <FormItem label="关键词">
            <!-- style="margin-bottom: 0" -->
            <Input
              v-model="formData.keyword"
              style="width: 250px"
              placeholder="请输入关键词"
              size="large"
              clearable
            ></Input>
          </FormItem>
        </Form>
        <Button type="primary" @click="handleFormSubmit">查询</Button>
        <Button type="primary" class="ml12" @click="handleExport('all')">全部导出</Button>
        <Button type="primary" class="ml12" @click="handleExport">导出</Button>
      </div>
    </div>

    <transition name="fade" mode="out-in">
      <component :is="tabActiveItem.component" :form-data="formData" @on-update-title="handleUpdateTitle"></component>
    </transition>
  </div>
</template>

<script>
// components
import ThemePublicitySituation from './components/ThemePublicitySituation.vue'
import TopicGroupSituation from './components/TopicGroupSituation.vue'

// utils
import { createCommonPage } from '/src/utils/service.js'
const createForm = () => ({ keyword: '', ...createCommonPage() })
import $bus from '@/utils/bus.js'

export default {
  name: 'DirectiveReshipDetails',

  components: {
    ThemePublicitySituation,
    TopicGroupSituation,
  },

  data() {
    return {
      /* tabActiveValue: '',
      tabs: [
        { label: '主题宣传作品情况', value: 'theme', component: 'theme-publicity-situation' },
        { label: '话题组情况', value: 'topic', component: 'topic-group-situation' },
      ], */

      tableTitle: '',

      formData: createForm(),
    }
  },

  computed: {
    /* 显示一个组件就够用了 */
    tabActiveItem() {
      // return this.tabs.find((t) => t.value === this.tabActiveValue) || {}
      return { label: '主题宣传作品情况', value: 'theme', component: 'theme-publicity-situation' }
    },
  },

  methods: {
    /* handleTabClick(name) {
      this.$router.push({ name: 'directiveReshipDetails', query: { t: name } })
    }, */

    handleUpdateTitle(t) {
      this.tableTitle = t
    },

    handleFormSubmit() {
      $bus.$emit('on-directive-reship-details', this.formData)
    },

    handleExport(msg) {
      $bus.$emit('on-directive-export', { msg })
    },
  },

  mounted() {
    // this.tabActiveValue = this.$route.query.t || this.tabs[0].value
  },
}
</script>

<style lang="less" scoped></style>
